<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //可观察对象(可控制对象)
      //1.Object.create();  2.Object.defineProperty();

      //一.Object.defineProperties 创建多个属性的可控对象
      var obj = Object.defineProperties(
        {},
        {
          myname: {
            configurable: true,
            enumerable: true,
            get: function () {
              console.log("myname获取的时候执行");
              return "张三";
            },
            set: function (newValue) {
              console.log(newValue);
            },
          },
          age: {
            configurable: true,
            enumerable: true,
            get: function () {
              console.log("age获取的时候执行");
              return 20;
            },
            set: function (newValue) {
              console.log(newValue);
            },
          },
        }
      );

      console.log(obj);

      //二.ES6版本  Proxy : 内置构造函数  Proxy: 代理
      //vue3.0响应式的核心函数
      var obj1 = {
        myname: "张三",
        age: 20,
      };
      console.log(obj1);
      var obj2 = new Proxy(obj1, {
        get: function (target, key) {
          //target源目标对象===obj1   key===键名  proxy内部帮你循环
          console.log("获取的时候执行");
          return target[key];
        },
        set: function (target, key, newValue) {
          target[key] = newValue;
        },
      });
      console.log(obj2);
      console.log(obj2.myname);
      obj2.age = 30;
      console.log(obj2);
    </script>
  </body>
</html>
